<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.powerhua.cms.domain.Content" %>
<%
	Object obj = request.getAttribute("content");
	Content c = null;
	if(obj != null) {
		c = (Content)obj;
	} else {
		c = new Content();
		c.setContentId("");
		c.setContentName("未命名文档");
		c.setContentDesc("添加描述说明");
	}
%>
<html>
<head>
<title>XCMS - 编辑文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
@import url(../css/base.css);
@import url(../css/doc.css);
</style>
<script type="text/javascript" src="../js/commons/prototype.js"></script>
<script type="text/javascript" src="../js/commons/commons.js"></script>
<script type="text/javascript" src="../js/cms/index.js"></script>
<script language="javascript" type="text/javascript" 
src="../js/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
	tinyMCE.init({
		mode : "textareas",
		theme : "advanced",
		language :"en",
		plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,media,searchreplace,print,contextmenu,paste,directionality,fullscreen",
		theme_advanced_buttons1: "undo,redo,cut,copy,paste,separator,bold,italic,underline,forecolor,backcolor,link,separator,bullist,numlist,outdent,indent,separator,justifyleft,justifycenter,justifyright,justifyfull,separator",
		theme_advanced_buttons1_add: "fontselect,fontsizeselect,separator,removeformat",
		theme_advanced_buttons2: "",
		theme_advanced_buttons3: "",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left"
	});
</script>
<script type="text/javascript">
powerhua.cms = {};

function startAfterLoad() {
	var bodyHeight = document.body.clientHeight;
	var headerHeight = document.getElementById("header").offsetHeight;
	var listMenuHeight = document.getElementById("doc_edit_menu").offsetHeight;
	var listHeight = bodyHeight - headerHeight - listMenuHeight - 30;
	document.getElementById("docContent").style.height = "" + listHeight + "px";
	
	document.getElementById("content_name").innerHTML = "<%=c.getContentName()%>";
	document.getElementById("content_desc").innerHTML = "<%=c.getContentDesc()%>";
	
	initEditContentPopupMenu();
}

var menuTdId = "";
var popup = false;
var popupDivId = "";
var popupTimes = 0;
/**
 * 菜单
 **/
function setOverMenu(mId, divId) {
	$(mId).setAttribute("class", "doc_td_menu_over");
	if(popup == true && popupDivId != divId ) {
		setEditContentMenu(mId, divId);
		popupDivId = divId;
	}
}
function setOutMenu(mId) {
	if(popup == false) {
		$(mId).setAttribute("class", "doc_td_menu");
	}
}
/**
 * 弹出菜单
 **/
powerhua.cms.setOverPopupMenuTd = function(event, pTd, mId) {
	pTd.setAttribute("class", "doc_div_pop_menu_td_over");
	$(mId).setAttribute("class", "doc_td_menu_over");
}
powerhua.cms.setOutPopupMenuTd = function(event, pTd, mId) {
	pTd.setAttribute("class", "doc_div_pop_menu_td");
}
function initEditContentPopupMenu() {
	var menu01 = [
		['image.gif', 'location', '新建'],
		['image.gif', 'location', '导入...'],
		['image.gif', 'location', '关闭']
	];
	var menu02 = [
		['image.gif', 'location', '共享给其他人'],
		['image.gif', 'location', '发送电子邮件'],
		['image.gif', 'location', '聊天']
	];
	buildEditContentPopupMenu(menu01, "edit_content_menu_div_01", "edit_content_menu_table_01", "edit_content_menu_td_01");
	buildEditContentPopupMenu(menu02, "edit_content_menu_div_02", "edit_content_menu_table_02", "edit_content_menu_td_02");
	buildEditContentPopupMenu(menu02, "edit_content_menu_div_03", "edit_content_menu_table_03", "edit_content_menu_td_03");
	buildEditContentPopupMenu(menu02, "edit_content_menu_div_04", "edit_content_menu_table_04", "edit_content_menu_td_04");
	
	document.onclick = menuOff;
}
function menuOff() {
	//alert(popupTimes);
	if(popupTimes > 1) {
		if(popupDivId != "") {
			$(popupDivId).style.display = "none";
			popupDivId = "";
		}
		if(menuTdId != "") {
			$(menuTdId).setAttribute("class", "doc_td_menu");
			menuTdId = "";
		}
		popup = false;
		popupTimes = 0;
	} else {
		popupTimes++;
	}
}
function buildEditContentPopupMenu(arrMenu, divId, tableId, tdId) {
	var tbObj = document.createElement("table");
	tbObj.setAttribute("id", tableId);
	tbObj.setAttribute("border", "0");
	tbObj.setAttribute("cellpadding", "0");
	tbObj.setAttribute("cellspacing", "2");
	tbObj.setAttribute("bgcolor", "#FFFFFF");
	tbObj.setAttribute("class", "doc_div_pop_menu_tb");
	
	for(var j = 0; j < arrMenu.length; j++) {
		var trObj = document.createElement("tr");
		var tdObj = document.createElement("td");
		tdObj.setAttribute("class", "doc_div_pop_menu_td");
		Event.observe(tdObj, "mouseover", powerhua.cms.setOverPopupMenuTd.bindAsEventListener(this, tdObj, tdId), false);
		Event.observe(tdObj, "mouseout", powerhua.cms.setOutPopupMenuTd.bindAsEventListener(this, tdObj, tdId), false);
		tdObj.innerHTML = arrMenu[j][2];
		trObj.appendChild(tdObj);
		tbObj.appendChild(trObj);
	}
	
	var divObj = document.createElement("div");
	divObj.setAttribute("id", divId);
	divObj.setAttribute("class", "doc_div_pop_menu");
	divObj.appendChild(tbObj);
	divObj.style.display = "none";
	document.getElementsByTagName("body")[0].appendChild(divObj);
}
function setEditContentMenu(mId, divId) {	
	if(popupDivId != "") {
		$(popupDivId).style.display = "none";
	}
	if(menuTdId != "") {
		$(menuTdId).setAttribute("class", "doc_td_menu");
	}
	
	// 
	var m = $(mId);
	var headerHeight = $("header").offsetHeight;
	var height1 = document.getElementById("content_name_desc").offsetHeight - 1;
	var divObj = $(divId);
	divObj.style.top = headerHeight + height1 + m.offsetTop + m.offsetHeight + "px";
	divObj.style.left = m.offsetLeft + 2 + "px";
	divObj.style.display = "";
	
	popup = true;
	popupDivId = divId;
	menuTdId = mId;
	
	popupTimes++;
}
</script>
</head>

<body>
<div id="header">
<table width="100%" height="30" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top">&nbsp;</td>
    <td align="right" valign="top">&nbsp;</td>
  </tr>
</table>
<div id="header_menu">
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">&nbsp;</td>
    <td class="menu_selected_left">文档管理</td>
    <td class="menu_selected_right">&nbsp;</td>
    <td class="menu_not_selected_left">工作流</td>
    <td class="menu_not_selected_right">&nbsp;</td>
	<td class="menu_not_selected_left">人力资源</td>
    <td class="menu_not_selected_right">&nbsp;</td>
	<td class="menu_not_selected_left">费用管理</td>
    <td class="menu_not_selected_right">&nbsp;</td>
  </tr>
</table>
</div>
</div>
<form name="content_form" action="" method="post">
<div id="doc_edit_menu">
	<input type="hidden" name="content_id" id="content_id" value="<%=c.getContentId() %>">
	<div id="content_name_desc" style="padding:6px; background-color:#CEE0F6; border-bottom:solid 1px #aaa; font-size:12px; font-weight:bolder;">
		<span id="content_name" style="cursor:pointer">未命名文档</span> / <span id="content_desc" style="cursor:pointer">添加描述说明</span>
	</div>
	<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border-bottom:1px solid #eee;">
      <tr>
        <td><table id="edit_content_menu" border="0" cellspacing="2" cellpadding="0">
          <TR>
            <TD id="edit_content_menu_td_01" valign="middle" class="doc_td_menu" onclick="setEditContentMenu('edit_content_menu_td_01', 'edit_content_menu_div_01')" onMouseOver="setOverMenu('edit_content_menu_td_01', 'edit_content_menu_div_01')" onMouseOut="setOutMenu('edit_content_menu_td_01')">文件</TD>
            <TD id="edit_content_menu_td_02" valign="middle" class="doc_td_menu" onclick="setEditContentMenu('edit_content_menu_td_02', 'edit_content_menu_div_02')" onMouseOver="setOverMenu('edit_content_menu_td_02', 'edit_content_menu_div_02')" onMouseOut="setOutMenu('edit_content_menu_td_02')">共享</TD>
            <TD id="edit_content_menu_td_03" valign="middle" class="doc_td_menu" onclick="setEditContentMenu('edit_content_menu_td_03', 'edit_content_menu_div_03')" onMouseOver="setOverMenu('edit_content_menu_td_03', 'edit_content_menu_div_03')" onMouseOut="setOutMenu('edit_content_menu_td_03')" >发布</TD>
            <TD id="edit_content_menu_td_04" valign="middle" class="doc_td_menu" onclick="setEditContentMenu('edit_content_menu_td_04', 'edit_content_menu_div_04')" onMouseOver="setOverMenu('edit_content_menu_td_04', 'edit_content_menu_div_04')" onMouseOut="setOutMenu('edit_content_menu_td_04')" >帮助</TD>
          </TR>
        </table>
		</td>
      </tr>
    </table>
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top">
      <textarea id="docContent" name="docContent" style="width:100%;height:400px;border:solid 1px #666; ">
      <%
		if(c != null && c.getContentDetail() != null) {
			out.print(c.getContentDetail());
		}
      %>
      </textarea>
    </td>
  </tr>
</table>
</form>
</body>
</html>
<script type="text/javascript">
startAfterLoad();
</script>